weaverTree树形组件是一款基于jquery开发的“树插件”，用于支持多节点的分层展示。其主要特点如下： 
1、支持异步加载数据，提高系统性能； 
2、采用json格式作为数据传输机制，兼容性强； 
3、支持分类统计数字显示； 
4、集成控制树形节点的样式。

引入相关文件

<link rel="stylesheet" href="/css/ecology8/request/leftNumMenu_wev8.css" type="text/css" />
<script type="text/javascript" src="/js/ecology8/request/leftNumMenu_wev8.js"></script>
<link rel="stylesheet" href="/wui/common/jquery/plugin/zTree/css/zTreeStyle/zTreeStyle_wev8.css" type="text/css">
<script type="text/javascript" src="/wui/common/jquery/plugin/zTree/js/jquery.ztree.core_wev8.js"></script>
<%@ include file="/systeminfo/leftMenuCommon.jsp" %>

显示区域

<div class="zDialog_div_content">
<table cellspacing="0" cellpadding="0" class="flowsTable" style="width:100%;height:100%;"  >
    <tr>
        <td class="leftTypeSearch">
            <div>
                <span class="leftType">菜单分类<span id="totalDoc"></span></span>
                <span class="leftSearchSpan">
                    &nbsp;<input type="text" class="leftSearchInput" style="width:110px;"/>
                </span>
            </div>
        </td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td style="width:23%;" class="flowMenusTd">
            <div class="flowMenuDiv"  >
                    <div class="ulDiv">
                        <div id="deeptree" class="cxtree" CfgXMLSrc="/css/TreeConfig.xml" style="overflow:hidden;">
                    </div>
            </div>
        </td>
    </tr>
</table>
</DIV>

树形组件数据和脚本

<script type="text/javascript">
var demoLeftMenus=[
                   { 
                    name:"一级菜单01",
                    //attr表示自定义属性，里面可以放跟业务相关的数据，例如在待办中可以放typeid表示流程类别的ID
                    attr:{
                     typeid:"abcdefg"
                    },
                    //submenus表示子菜单（子菜单可以嵌套，但是在本例中只写了两级菜单）
                    submenus:[
                     { 
                      name:"二级类型0101",
                      //这里的workflowid和nodeids是根据流程路径的类型确定的
                      //你可以放其他的属性，比如说如果这个菜单用于文档，那么这个地方可以放文档目录的ID
                      attr:{
                       workflowid:"12345678",
                       nodeids:"87654321"
                      },

                      //二级菜单的数字
                      numbers:{
                       //菜单标题后面显示的数字（可以有任意个，但是不要放太多，否则页面样式没法处理）
                       //下面四个属性分别代表流程中的四种状态；可以根据你的实际需求在这里放入任意属性
                        flowNew:"1",
                        flowResponse:"0",
                        flowOut:"0",
                        flowAll:"7"
                      }
                     }
                    ],

                    //一级菜单的数字
                    numbers:{
                      flowNew:"1",
                      flowResponse:"0",
                      flowOut:"0",
                      flowAll:"7"
                    }
                   }
                   ,
                   { 
                    name:"一级菜单02",
                    attr:{
                     typeid:"2"
                    },
                    submenus:[
                     { 
                      name:"二级菜单0201",
                      attr:{
                       workflowid:"207",
                       nodeids:""
                      },
                      numbers:{
                        flowNew:"0",
                        flowResponse:"0",
                        flowOut:"0",
                        flowAll:"3"
                      }
                     },
                     { 
                      name:"二级菜单0202",
                      attr:{
                       workflowid:"767",
                       nodeids:""
                      },
                      numbers:{
                        flowNew:"0",
                        flowResponse:"0",
                        flowOut:"0",
                        flowAll:"2"
                      }
                     }
                    ],
                    numbers:{
                      flowNew:"5",
                      flowResponse:"0",
                      flowOut:"0",
                      flowAll:"17"
                    }
                   }
                  ];

$(".ulDiv").leftNumMenu(demoLeftMenus,{
     numberTypes:{
     //下面的四个属性需要跟你在数据中定义的属性名称相同，本例中为flowNew、flowResponse、flowOut、flowAll
      flowNew:{
           hoverColor:"#EDCEAF",//鼠标悬停时显示的方块的颜色 
           color:"#FFA302",//普通文字的颜色 
           title:"新的流程"//鼠标悬停时显示的方块的title  
      },
      flowResponse:{hoverColor:"#C0D8B8",color:"#486C3E",title:"超时的流程"},
      flowOut:{hoverColor:"#DAC0E3",color:"#C325FF",title:"有反馈的流程"},
      flowAll:{hoverColor:"#A6A6A6",color:"black",title:"全部流程"}
     },
     //是否显示值为0的数字；不写的话默认为false
     showZero:false,

     //菜单的点击事件
     //三个参数的含义：
     //attr:就是你在菜单中定义的自定义属性，attr.xxx可以取到属性的值；例如attr.workflowid
     //level：被点击的菜单的层级；注意是从1开始，不是从0开始的；
     //numberType：如果你是在鼠标悬停的方块上点击的，那么这个numberType的值为方块的类型。比如说flowNew
     clickFunction:function(attr,level,numberType){
          var v = '';
          if(level==1){
            v = attr.typeid;
          }else{
            v = attr.workflowid;
          }
          parent.jQuery("#contentframe").attr("src","/demo/body.jsp?level="+level+"&value="+v);
     }
  });

</script>

页面效果

 

 

相关方法 

方法1返回类型描述
e8InitTreeSearch无用于树形结构顶部恢复初始状态
方法参数是否必须类型描述
options是json
ifrms:查找到查询条件所在页面的iframe层级，多个以,号分隔，如：#flowFrame,#tabcontentframe；
_document:初始iframe所在的document对象，默认为树所在的document对象；
conditions:需要清空的条件集合，多个以,号分隔；如：#maincategory,#subcategory,#seccategory
formID:conditions所在的form的ID；如：#frmmain
注：ifrms，conditions，formID都是以jquery selector的方式给定
方法2返回类型描述
__weaverTreeNamespace__._expandAll无展开所有的节点
方法参数是否必须类型描述
方法3返回类型描述
__weaverTreeNamespace__.getZTreeObjObject返回ztree根对象
方法参数是否必须类型描述
方法4返回类型描述
__weaverTreeNamespace__.selectDefaultNode无选中指定的节点
方法参数是否必须类型描述
key是string用于查找节点的key值，如tId
value是string用于查找节点的value值，如sec_119
方法4返回类型描述
__weaverTreeNamespace__.cancelSelectedNode无取消选中的节点如果没有传递参数，则取消第一个选中的节点
方法参数是否必须类型描述
key否string用于查找节点的key值，如tId
value否string用于查找节点的value值，如sec_119
方法5返回类型描述
__weaverTreeNamespace__.checkedDefaultNode无选中指定的节点（当开启了checkbox模式才生效）
方法参数是否必须类型描述
key是string用于查找节点的key值，如tId
values是string用于查找节点的value值集合，多个以,分隔，如sec_119,sec_231等

 

Demo下载 ：： 【下载】